<template>
	<div id="other">
		<h1>1 focus 聚焦指令</h1>
		<input v-focus type="text" />
		<el-divider />
		<!-- ====================================================== -->
		<h1>2 debounce 点击防抖节流指令</h1>
		<el-button v-debounce:mousemove type="primary" @click="btnClick">传入arg mousemove</el-button>
		<el-button v-debounce type="primary" @click="btnClick">不传value 默认1s</el-button>
		<el-button v-debounce="5000" type="danger" @click="btnClick">传入value 5s</el-button>
		<el-divider />
		<!-- ====================================================== -->
		<h1>3 dialogDrag 弹窗拖拽指令</h1>
		<el-button type="warning" @click="dialogVisible1 = true">弹窗1</el-button>
		<el-dialog v-dialogDrag title="提示" :visible.sync="dialogVisible1" width="30%">
			<span>这是一段信息</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
			</span>
		</el-dialog>
		<el-divider />
		<!-- ====================================================== -->
		<h1>4 dialogDragRisize 弹窗拖拽,双击全屏，右下角拖拽 指令</h1>
		<el-button type="success" @click="dialogVisible2 = true">弹窗2</el-button>
		<el-dialog ref="dialog__wrapper" v-dialogDragRisize title="提示" :visible.sync="dialogVisible2" width="30%">
			<span>这是一段信息</span>
			<span slot="footer" class="dialog-footer mouse">
				<el-button @click="dialogVisible2 = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
			</span>
		</el-dialog>
		<el-divider />
		<!-- ====================================================== -->
		<h1>5 copy 双击复制指令</h1>
		<span v-copy>双击我复制</span>

		<el-divider />

		<!-- ====================================================== -->
		<h1>6 backTop 回顶部</h1>
		<el-button v-backTop:contents="500" type="danger">滚动500显示，回顶部</el-button>
		<el-button v-backTop:contents type="danger">滚回顶部</el-button>
		<el-divider />
		<!-- ====================================================== -->

		<h1>7 fullScreen 点击全屏</h1>
		<el-button v-fullScreen>点击全屏、退出全屏</el-button>
		<el-divider />

		<h1>8 waves 点击波纹回馈</h1>
		<el-button v-waves>点击点回馈</el-button>
		<el-button v-waves="{ type: 'center' }">中心回馈</el-button>

		<h1>9 permission 按钮权限</h1>
		<el-button type="primary" @click="changeRoles">切换游客</el-button>
		<br />
		<el-button v-permission="['admin', 'edit']">游客和管理员</el-button>
		<el-button v-permission="['admin']">管理员</el-button>

		<h1>10 expandClick 元素点击范围扩展指令</h1>
		<el-button v-expandClick="[20, 30, 40, 50]" size="mini" @click="btnClick">点击alert</el-button>

		<h1>11 screenfull 元素全屏指令</h1>
		<el-button v-screenfull size="mini">点击全屏</el-button>
		<el-button v-screenfull.icon size="mini">点击全屏 icon</el-button>

		<h1>11 empty 空状态指令</h1>
		<el-button
			@click="
				msg = '有内容了';
				emptyValue.visible = !emptyValue.visible;
			"
			>点击添加</el-button
		>
		<div v-empty="emptyValue" style="height: 500px; width: 500px">{{ msg }}</div>
	</div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
	name: "DirectiveMessage",
	data() {
		return {
			dialogVisible1: false,
			dialogVisible2: false,
			ruleForm1: { workInfo: {} },
			msg: "",
			emptyValue: {
				content: "暂无列表",
				img: require("@/assets/image/empty.jpg"),
				visible: true, // 是否显示空数据状态
			},
		};
	},
	methods: {
		...mapMutations("user", ["EDIT_ROLE"]),
		btnClick() {
			console.log(1);
		},
		changeRoles() {
			this.EDIT_ROLE(["edit"]);
			// 实际应该退出登录，这里知识测试指令才用强制更新
			this.$forceUpdate();
		},
	},
};
</script>

<style lang="scss" scoped>
#other {
	margin-bottom: 500px;
}
.v_drag {
	background: red;
	height: 200px;
	width: 200px;
}
::v-deep .el-dialog {
	display: flex;
	flex-direction: column;
	.el-dialog__body {
		border: 1px solid red;
		flex: 1;
	}
}
</style>
